<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏账号 - 登录/注册</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#6C5CE7', // 主色调：紫色
                        secondary: '#00B894', // 辅助色：青绿色
                        dark: '#2D3436',
                        light: '#F8F9FA',
                        accent: '#FD79A8', // 强调色：粉红色
                        success: '#27AE60',
                        warning: '#F39C12',
                        danger: '#E74C3C'
                    },
                    fontFamily: {
                        game: ['"Press Start 2P"', 'cursive', 'sans-serif'],
                        sans: ['Inter', 'system-ui', 'sans-serif']
                    },
                    animation: {
                        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
                        'float': 'float 6s ease-in-out infinite',
                        'glow': 'glow 2s ease-in-out infinite alternate',
                        'shake': 'shake 0.5s ease-in-out',
                        'fade-in': 'fadeIn 0.5s ease-in-out',
                        'slide-up': 'slideUp 0.3s ease-out',
                        'ripple': 'ripple 0.6s ease-out'
                    },
                    keyframes: {
                        float: {
                            '0%, 100%': { transform: 'translateY(0)' },
                            '50%': { transform: 'translateY(-10px)' }
                        },
                        glow: {
                            '0%': { boxShadow: '0 0 5px rgba(108, 92, 231, 0.5)' },
                            '100%': { boxShadow: '0 0 20px rgba(108, 92, 231, 0.8)' }
                        },
                        shake: {
                            '0%, 100%': { transform: 'translateX(0)' },
                            '25%': { transform: 'translateX(-5px)' },
                            '75%': { transform: 'translateX(5px)' }
                        },
                        fadeIn: {
                            '0%': { opacity: '0' },
                            '100%': { opacity: '1' }
                        },
                        slideUp: {
                            '0%': { transform: 'translateY(10px)', opacity: '0' },
                            '100%': { transform: 'translateY(0)', opacity: '1' }
                        },
                        ripple: {
                            '0%': { transform: 'scale(0)', opacity: '0.8' },
                            '100%': { transform: 'scale(4)', opacity: '0' }
                        }
                    }
                }
            }
        }
    </script>
    
    <!-- 自定义样式 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
            }
            .text-shadow-lg {
                text-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
            }
            .bg-game-pattern {
                background-image: radial-gradient(rgba(108, 92, 231, 0.1) 1px, transparent 1px);
                background-size: 30px 30px;
            }
            .input-focus {
                @apply focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none;
            }
            .input-error {
                @apply border-danger focus:border-danger focus:ring-danger/20;
            }
            .input-success {
                @apply border-success focus:border-success focus:ring-success/20;
            }
            .btn-game {
                @apply relative overflow-hidden bg-primary hover:bg-primary/90 text-white font-bold py-3 px-6 rounded-lg transition-all duration-300 transform hover:scale-105 active:scale-95;
            }
            .btn-game::before {
                content: '';
                @apply absolute top-0 left-[-100%] w-full h-full bg-gradient-to-r from-transparent to-white/20 transition-all duration-500;
            }
            .btn-game:hover::before {
                @apply left-[100%];
            }
            .btn-outline {
                @apply border border-primary text-primary hover:bg-primary/10 font-bold py-3 px-6 rounded-lg transition-all duration-300;
            }
            .password-strength-bar {
                @apply h-1.5 rounded-full transition-all duration-300;
            }
            .captcha-char {
                @apply inline-block w-10 h-10 text-center leading-10 text-xl font-bold cursor-pointer transition-all duration-200 hover:scale-110;
            }
            .ripple-container {
                @apply relative overflow-hidden cursor-pointer;
            }
            .ripple {
                @apply absolute rounded-full bg-white/20 transform scale-0 animate-ripple pointer-events-none;
            }
        }
    </style>
    
    <!-- 引入字体 -->
    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>

<body class="min-h-screen bg-dark text-light flex items-center justify-center p-4 bg-game-pattern overflow-x-hidden">
    <!-- 背景装饰元素 -->
    <div class="fixed inset-0 z-0 overflow-hidden pointer-events-none">
        <div class="absolute top-[10%] left-[5%] w-64 h-64 bg-primary/20 rounded-full blur-3xl animate-pulse-slow"></div>
        <div class="absolute bottom-[15%] right-[10%] w-80 h-80 bg-secondary/20 rounded-full blur-3xl animate-pulse-slow" style="animation-delay: 1s;"></div>
        <div class="absolute top-[40%] right-[20%] w-40 h-40 bg-accent/20 rounded-full blur-3xl animate-pulse-slow" style="animation-delay: 2s;"></div>
    </div>

    <!-- 主容器 -->
    <div class="relative z-10 w-full max-w-6xl flex flex-col lg:flex-row items-center justify-center gap-8 lg:gap-16">
        <!-- 登录成功后显示的游戏内容区域 -->
        <div id="game-content" class="hidden w-full">
            <div class="bg-dark/60 backdrop-blur-md border border-primary/30 rounded-2xl shadow-xl overflow-hidden">
                <!-- 顶部导航栏 -->
                <header class="border-b border-primary/30 bg-dark/80">
                    <div class="container mx-auto px-6 py-4 flex justify-between items-center">
                        <div class="flex items-center gap-4">
                            <div class="text-primary text-2xl font-game">游戏世界</div>
                            <nav class="hidden md:flex gap-6">
                                <a href="#" class="text-light hover:text-primary transition-colors ripple-container">首页</a>
                                <a href="#" class="text-light hover:text-primary transition-colors ripple-container">游戏库</a>
                                <a href="#" class="text-light hover:text-primary transition-colors ripple-container">社区</a>
                                <a href="#" class="text-light hover:text-primary transition-colors ripple-container">商城</a>
                                <a href="css.html" class="text-primary font-medium hover:text-primary/80 transition-colors ripple-container">会员中心</a>
                                <a href="#" class="text-light hover:text-primary transition-colors ripple-container">帮助</a>
                            </nav>
                        </div>
                        <div class="flex items-center gap-4">
                            <button class="text-light hover:text-primary transition-colors relative ripple-container">
                                <i class="fa fa-bell text-xl"></i>
                                <span class="absolute -top-1 -right-1 bg-danger text-white text-xs w-4 h-4 flex items-center justify-center rounded-full">3</span>
                            </button>
                            <div class="flex items-center gap-3">
                                <img src="https://picsum.photos/40/40" alt="用户头像" class="w-10 h-10 rounded-full border-2 border-primary">
                                <span class="text-light font-medium">玩家12345</span>
                            </div>
                            <button id="logout-button" class="btn-outline py-2 px-4 text-sm ripple-container">
                                <i class="fa fa-sign-out mr-2"></i>退出
                            </button>
                        </div>
                    </div>
                </header>
                
                <!-- 主要内容 -->
                <main class="p-6">
                    <!-- 欢迎横幅 -->
                    <div class="bg-gradient-to-r from-primary/20 to-secondary/20 rounded-xl p-6 mb-8 border border-primary/30">
                        <h2 class="text-2xl font-bold mb-2 text-primary">欢迎回来，玩家12345！</h2>
                        <p class="text-light/80">今天是探索游戏世界的好日子。您有 <span class="text-secondary font-semibold">3</span> 条未读消息和 <span class="text-secondary font-semibold">5</span> 个新任务待完成。</p>
                    </div>
                    
                    <!-- 推荐游戏 -->
                    <section class="mb-10">
                        <div class="flex justify-between items-center mb-6">
                            <h3 class="text-xl font-bold text-light">推荐游戏</h3>
                            <a href="#" class="text-primary hover:underline ripple-container">查看全部</a>
                        </div>
                        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                            <div class="bg-dark/50 rounded-lg overflow-hidden border border-light/20 hover:border-primary/50 transition-all hover:shadow-lg hover:shadow-primary/10">
                                <div class="relative h-40 overflow-hidden">
                                    <img src="https://picsum.photos/400/200?random=1" alt="游戏封面" class="w-full h-full object-cover">
                                    <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"></div>
                                    <span class="absolute bottom-2 left-2 bg-danger/80 text-white text-xs px-2 py-1 rounded">热门</span>
                                </div>
                                <div class="p-4">
                                    <h4 class="font-bold mb-1">荣耀大陆</h4>
                                    <div class="flex items-center text-warning text-sm mb-2">
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star-half-o"></i>
                                        <span class="ml-1 text-light/60">4.5</span>
                                    </div>
                                    <p class="text-sm text-light/60 mb-3 line-clamp-2">踏上一段史诗般的奇幻旅程，探索广阔的开放世界。</p>
                                    <button class="btn-game w-full py-2 text-sm ripple-container">立即游玩</button>
                                </div>
                            </div>
                            <div class="bg-dark/50 rounded-lg overflow-hidden border border-light/20 hover:border-primary/50 transition-all hover:shadow-lg hover:shadow-primary/10">
                                <div class="relative h-40 overflow-hidden">
                                    <img src="https://picsum.photos/400/200?random=2" alt="游戏封面" class="w-full h-full object-cover">
                                    <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"></div>
                                    <span class="absolute bottom-2 left-2 bg-secondary/80 text-white text-xs px-2 py-1 rounded">新品</span>
                                </div>
                                <div class="p-4">
                                    <h4 class="font-bold mb-1">星际战争</h4>
                                    <div class="flex items-center text-warning text-sm mb-2">
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star-o"></i>
                                        <span class="ml-1 text-light/60">4.0</span>
                                    </div>
                                    <p class="text-sm text-light/60 mb-3 line-clamp-2">在遥远的星系中展开激烈的太空战斗，征服未知星球。</p>
                                    <button class="btn-game w-full py-2 text-sm ripple-container">立即游玩</button>
                                </div>
                            </div>
                            <div class="bg-dark/50 rounded-lg overflow-hidden border border-light/20 hover:border-primary/50 transition-all hover:shadow-lg hover:shadow-primary/10">
                                <div class="relative h-40 overflow-hidden">
                                    <img src="https://picsum.photos/400/200?random=3" alt="游戏封面" class="w-full h-full object-cover">
                                    <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"></div>
                                </div>
                                <div class="p-4">
                                    <h4 class="font-bold mb-1">赛车传奇</h4>
                                    <div class="flex items-center text-warning text-sm mb-2">
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star-half-o"></i>
                                        <span class="ml-1 text-light/60">4.7</span>
                                    </div>
                                    <p class="text-sm text-light/60 mb-3 line-clamp-2">体验极致的赛车速度与激情，挑战各种赛道和对手。</p>
                                    <button class="btn-game w-full py-2 text-sm ripple-container">立即游玩</button>
                                </div>
                            </div>
                            <div class="bg-dark/50 rounded-lg overflow-hidden border border-light/20 hover:border-primary/50 transition-all hover:shadow-lg hover:shadow-primary/10">
                                <div class="relative h-40 overflow-hidden">
                                    <img src="https://picsum.photos/400/200?random=4" alt="游戏封面" class="w-full h-full object-cover">
                                    <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"></div>
                                    <span class="absolute bottom-2 left-2 bg-primary/80 text-white text-xs px-2 py-1 rounded">特惠</span>
                                </div>
                                <div class="p-4">
                                    <h4 class="font-bold mb-1">魔法学院</h4>
                                    <div class="flex items-center text-warning text-sm mb-2">
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star-o"></i>
                                        <i class="fa fa-star-o"></i>
                                        <span class="ml-1 text-light/60">3.2</span>
                                    </div>
                                    <p class="text-sm text-light/60 mb-3 line-clamp-2">学习强大的魔法技能，成为最伟大的魔法师。</p>
                                    <button class="btn-game w-full py-2 text-sm ripple-container">立即游玩</button>
                                </div>
                            </div>
                        </div>
                    </section>
                    
                    <!-- 最近活动 -->
                    <section>
                        <div class="flex justify-between items-center mb-6">
                            <h3 class="text-xl font-bold text-light">最近活动</h3>
                            <a href="#" class="text-primary hover:underline ripple-container">查看全部</a>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div class="bg-dark/50 rounded-lg p-5 border border-light/20">
                                <div class="flex items-center gap-4 mb-4">
                                    <div class="bg-accent/20 w-12 h-12 rounded-full flex items-center justify-center text-accent text-2xl">
                                        <i class="fa fa-gift"></i>
                                    </div>
                                    <div>
                                        <h4 class="font-bold">新手礼包</h4>
                                        <p class="text-sm text-light/60">还有 3 天到期</p>
                                    </div>
                                </div>
                                <p class="text-light/80 mb-4">领取您的新手专属礼包，包含稀有装备和游戏币。</p>
                                <button class="btn-outline w-full ripple-container">领取礼包</button>
                            </div>
                            <div class="bg-dark/50 rounded-lg p-5 border border-light/20">
                                <div class="flex items-center gap-4 mb-4">
                                    <div class="bg-warning/20 w-12 h-12 rounded-full flex items-center justify-center text-warning text-2xl">
                                        <i class="fa fa-trophy"></i>
                                    </div>
                                    <div>
                                        <h4 class="font-bold">周末锦标赛</h4>
                                        <p class="text-sm text-light/60">今天 20:00 开始</p>
                                    </div>
                                </div>
                                <p class="text-light/80 mb-4">参与周末锦标赛，赢取丰厚奖励和专属称号。</p>
                                <button class="btn-outline w-full ripple-container">报名参加</button>
                            </div>
                        </div>
                    </section>
                </main>
            </div>
        </div>
        
        <!-- 左侧游戏宣传 -->
        <div class="w-full lg:w-1/2 text-center lg:text-left order-2 lg:order-1">
            <h1 class="font-game text-[clamp(1.5rem,5vw,3rem)] text-primary mb-6 leading-tight text-shadow-lg animate-float">
                加入我们的<br>游戏世界
            </h1>
            <p class="text-lg text-light/80 mb-8 max-w-md mx-auto lg:mx-0">
                注册账号，开启一段奇幻冒险。与全球玩家一起探索未知领域，挑战极限，成为传奇！
            </p>
            
            <!-- 游戏宣传视频 -->
            <div class="mb-8 bg-dark/30 border border-primary/20 rounded-xl overflow-hidden shadow-lg shadow-primary/10 w-full max-w-lg mx-auto lg:mx-0">
                <div class="relative" style="padding-top: 56.25%;">
                    <iframe 
                        src="//player.bilibili.com/player.html?isOutside=true&aid=648347180&bvid=BV19e4y1M778&cid=909583840&p=1" 
                        scrolling="no" 
                        border="0" 
                        frameborder="no" 
                        framespacing="0" 
                        allowfullscreen="true"
                        class="absolute inset-0 w-full h-full"
                    ></iframe>
                </div>
            </div>
            
            <!-- 游戏特色 -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
                <div class="bg-dark/50 backdrop-blur-sm border border-primary/30 p-4 rounded-lg animate-float ripple-container" style="animation-delay: 0.2s;">
                    <div class="text-primary text-2xl mb-2"><i class="fa fa-shield"></i></div>
                    <h3 class="font-semibold mb-1">账号安全保障</h3>
                    <p class="text-sm text-light/60">双重验证保护您的账号安全</p>
                </div>
                <div class="bg-dark/50 backdrop-blur-sm border border-primary/30 p-4 rounded-lg animate-float ripple-container" style="animation-delay: 0.4s;">
                    <div class="text-secondary text-2xl mb-2"><i class="fa fa-gift"></i></div>
                    <h3 class="font-semibold mb-1">新用户福利</h3>
                    <p class="text-sm text-light/60">注册即送新手大礼包</p>
                </div>
                <div class="bg-dark/50 backdrop-blur-sm border border-primary/30 p-4 rounded-lg animate-float ripple-container" style="animation-delay: 0.6s;">
                    <div class="text-accent text-2xl mb-2"><i class="fa fa-globe"></i></div>
                    <h3 class="font-semibold mb-1">全球服务器</h3>
                    <p class="text-sm text-light/60">多区域服务器，低延迟体验</p>
                </div>
                <div class="bg-dark/50 backdrop-blur-sm border border-primary/30 p-4 rounded-lg animate-float ripple-container" style="animation-delay: 0.8s;">
                    <div class="text-warning text-2xl mb-2"><i class="fa fa-headphones"></i></div>
                    <h3 class="font-semibold mb-1">24/7客服支持</h3>
                    <p class="text-sm text-light/60">专业客服团队随时为您服务</p>
                </div>
            </div>
            
            <!-- 下载客户端按钮 -->
            <div class="flex flex-wrap gap-4 justify-center lg:justify-start">
                <button class="btn-outline flex items-center ripple-container">
                    <i class="fa fa-download mr-2"></i> 下载客户端
                </button>
                <a href="css.html" class="btn-game flex items-center ripple-container">
                    <i class="fa fa-diamond mr-2"></i> 会员中心
                </a>
                <button class="btn-outline flex items-center ripple-container">
                    <i class="fa fa-info-circle mr-2"></i> 了解更多
                </button>
            </div>
        </div>
        
        <!-- 右侧表单容器 -->
        <div class="w-full lg:w-1/2 max-w-md order-1 lg:order-2">
            <div class="bg-dark/60 backdrop-blur-md border border-primary/30 rounded-2xl shadow-xl overflow-hidden transform transition-all duration-500 hover:shadow-primary/20">
                
                <!-- 表单标题切换 -->
                <div class="flex border-b border-primary/30">
                    <button id="login-tab" class="w-1/2 py-4 font-semibold text-primary border-b-2 border-primary transition-all ripple-container">
                        <i class="fa fa-sign-in mr-2"></i>登录
                    </button>
                    <button id="register-tab" class="w-1/2 py-4 font-semibold text-light/60 hover:text-light transition-all ripple-container">
                        <i class="fa fa-user-plus mr-2"></i>注册
                    </button>
                </div>
                
                <!-- 消息提示框 -->
                <div id="message-box" class="hidden px-6 py-3 animate-fade-in">
                    <div id="success-message" class="hidden bg-success/20 border border-success/30 text-success px-4 py-2 rounded-lg flex items-center">
                        <i class="fa fa-check-circle mr-2"></i>
                        <span id="success-text">操作成功！</span>
                    </div>
                    <div id="error-message" class="hidden bg-danger/20 border border-danger/30 text-danger px-4 py-2 rounded-lg flex items-center">
                        <i class="fa fa-exclamation-circle mr-2"></i>
                        <span id="error-text">操作失败，请重试！</span>
                    </div>
                </div>
                
                <!-- 登录表单 -->
                <div id="login-form" class="p-6 lg:p-8 animate-slide-up">
                    <div class="mb-6">
                        <label for="login-email" class="block text-sm font-medium mb-2">邮箱</label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-light/50">
                                <i class="fa fa-envelope"></i>
                            </span>
                            <input type="email" id="login-email" 
                                class="w-full pl-10 pr-4 py-3 bg-dark/40 border border-light/20 rounded-lg input-focus transition-all"
                                placeholder="your@email.com" value="user@example.com" required>
                            <span id="login-email-error" class="hidden absolute -bottom-5 left-0 text-danger text-xs">
                                <i class="fa fa-exclamation-circle mr-1"></i> 请输入有效的邮箱地址
                            </span>
                        </div>
                    </div>
                    
                    <div class="mb-6">
                        <div class="flex justify-between mb-2">
                            <label for="login-password" class="block text-sm font-medium">密码</label>
                            <a href="#" id="forgot-password-link" class="text-sm text-primary hover:underline">忘记密码?</a>
                        </div>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-light/50">
                                <i class="fa fa-lock"></i>
                            </span>
                            <input type="password" id="login-password" 
                                class="w-full pl-10 pr-10 py-3 bg-dark/40 border border-light/20 rounded-lg input-focus transition-all" 
                                placeholder="请输入密码" value="123456" required>
                            <button type="button" class="password-toggle absolute inset-y-0 right-0 flex items-center pr-3 text-light/50 hover:text-light transition-colors">
                                <i class="fa fa-eye-slash"></i>
                            </button>
                            <span id="login-password-error" class="hidden absolute -bottom-5 left-0 text-danger text-xs">
                                <i class="fa fa-exclamation-circle mr-1"></i> 密码不能为空
                            </span>
                        </div>
                    </div>
                    
                    <!-- 验证码 -->
                    <div class="mb-6">
                        <label class="block text-sm font-medium mb-2">验证码</label>
                        <div class="flex gap-3">
                            <div class="relative flex-1">
                                <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-light/50">
                                    <i class="fa fa-key"></i>
                                </span>
                                <input type="text" id="login-captcha" 
                                    class="w-full pl-10 pr-4 py-3 bg-dark/40 border border-light/20 rounded-lg input-focus transition-all"
                                    placeholder="请输入验证码" required>
                                <span id="login-captcha-error" class="hidden absolute -bottom-5 left-0 text-danger text-xs">
                                    <i class="fa fa-exclamation-circle mr-1"></i> 验证码不正确
                                </span>
                            </div>
                            <div id="login-captcha-image" class="bg-dark/60 border border-light/20 rounded-lg p-2 flex items-center justify-center min-w-[120px]">
                                <!-- 验证码将通过JS生成 -->
                            </div>
                            <button type="button" id="refresh-login-captcha" class="text-light/60 hover:text-primary transition-colors flex items-center justify-center">
                                <i class="fa fa-refresh"></i>
                            </button>
                        </div>
                    </div>
                    
                    <div class="mb-6 flex items-center">
                        <input type="checkbox" id="remember-me" class="w-4 h-4 rounded border-light/30 bg-dark/40 text-primary focus:ring-primary" checked>
                        <label for="remember-me" class="ml-2 text-sm">记住我 (30天)</label>
                    </div>
                    
                    <button type="submit" id="login-button" class="btn-game w-full mb-6 animate-glow">
                        登录游戏
                    </button>
                    
                    <div class="relative flex items-center mb-6">
                        <div class="flex-grow h-px bg-light/20"></div>
                        <span class="px-4 text-light/60 text-sm">或使用以下方式登录</span>
                        <div class="flex-grow h-px bg-light/20"></div>
                    </div>
                    
                    <div class="grid grid-cols-4 gap-4 mb-6">
                        <button class="social-login flex items-center justify-center py-3 bg-[#1877F2]/10 border border-[#1877F2]/30 rounded-lg hover:bg-[#1877F2]/20 transition-all" data-provider="facebook">
                            <i class="fa fa-facebook text-[#1877F2]"></i>
                        </button>
                        <button class="social-login flex items-center justify-center py-3 bg-[#EA4335]/10 border border-[#EA4335]/30 rounded-lg hover:bg-[#EA4335]/20 transition-all" data-provider="google">
                            <i class="fa fa-google text-[#EA4335]"></i>
                        </button>
                        <button class="social-login flex items-center justify-center py-3 bg-[#000000]/10 border border-[#FFFFFF]/30 rounded-lg hover:bg-[#000000]/20 transition-all" data-provider="steam">
                            <i class="fa fa-steam text-[#FFFFFF]"></i>
                        </button>
                        <button class="social-login flex items-center justify-center py-3 bg-[#1DA1F2]/10 border border-[#1DA1F2]/30 rounded-lg hover:bg-[#1DA1F2]/20 transition-all" data-provider="twitter">
                            <i class="fa fa-twitter text-[#1DA1F2]"></i>
                        </button>
                    </div>
                    
                    <p class="text-center text-sm text-light/60">
                        还没有账号? <a href="#" id="switch-to-register" class="text-primary hover:underline font-medium">立即注册</a>
                    </p>
                </div>
                
                <!-- 注册表单 -->
                <div id="register-form" class="p-6 lg:p-8 hidden animate-slide-up">
                    <div class="mb-6">
                        <label for="register-username" class="block text-sm font-medium mb-2">用户名</label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-light/50">
                                <i class="fa fa-user"></i>
                            </span>
                            <input type="text" id="register-username" 
                                class="w-full pl-10 pr-4 py-3 bg-dark/40 border border-light/20 rounded-lg input-focus transition-all"
                                placeholder="游戏昵称 (4-16个字符)" required>
                            <span id="register-username-error" class="hidden absolute -bottom-5 left-0 text-danger text-xs">
                                <i class="fa fa-exclamation-circle mr-1"></i> 用户名必须为4-16个字符
                            </span>
                        </div>
                    </div>
                    
                    <div class="mb-6">
                        <label for="register-email" class="block text-sm font-medium mb-2">邮箱</label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-light/50">
                                <i class="fa fa-envelope"></i>
                            </span>
                            <input type="email" id="register-email" 
                                class="w-full pl-10 pr-4 py-3 bg-dark/40 border border-light/20 rounded-lg input-focus transition-all"
                                placeholder="your@email.com" required>
                            <span id="register-email-error" class="hidden absolute -bottom-5 left-0 text-danger text-xs">
                                <i class="fa fa-exclamation-circle mr-1"></i> 请输入有效的邮箱地址
                            </span>
                            <span id="register-email-exists" class="hidden absolute -bottom-5 left-0 text-danger text-xs">
                                <i class="fa fa-exclamation-circle mr-1"></i> 该邮箱已被注册
                            </span>
                        </div>
                    </div>
                    
                    <div class="mb-6">
                        <label for="register-password" class="block text-sm font-medium mb-2">密码</label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-light/50">
                                <i class="fa fa-lock"></i>
                            </span>
                            <input type="password" id="register-password" 
                                class="w-full pl-10 pr-10 py-3 bg-dark/40 border border-light/20 rounded-lg input-focus transition-all"
                                placeholder="至少8个字符，包含字母和数字" required>
                            <button type="button" class="password-toggle absolute inset-y-0 right-0 flex items-center pr-3 text-light/50 hover:text-light transition-colors">
                                <i class="fa fa-eye-slash"></i>
                            </button>
                            <span id="register-password-error" class="hidden absolute -bottom-5 left-0 text-danger text-xs">
                                <i class="fa fa-exclamation-circle mr-1"></i> 密码至少8个字符，包含字母和数字
                            </span>
                        </div>
                        
                        <!-- 密码强度指示器 -->
                        <div class="mt-3">
                            <div class="flex gap-1 mb-1">
                                <div id="strength-1" class="password-strength-bar w-1/4 bg-dark"></div>
                                <div id="strength-2" class="password-strength-bar w-1/4 bg-dark"></div>
                                <div id="strength-3" class="password-strength-bar w-1/4 bg-dark"></div>
                                <div id="strength-4" class="password-strength-bar w-1/4 bg-dark"></div>
                            </div>
                            <div class="flex justify-between text-xs text-light/60">
                                <span>弱</span>
                                <span>中等</span>
                                <span>强</span>
                                <span>极强</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-6">
                        <label for="register-confirm" class="block text-sm font-medium mb-2">确认密码</label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-light/50">
                                <i class="fa fa-lock"></i>
                            </span>
                            <input type="password" id="register-confirm" 
                                class="w-full pl-10 pr-10 py-3 bg-dark/40 border border-light/20 rounded-lg input-focus transition-all"
                                placeholder="再次输入密码" required>
                            <button type="button" class="password-toggle absolute inset-y-0 right-0 flex items-center pr-3 text-light/50 hover:text-light transition-colors">
                                <i class="fa fa-eye-slash"></i>
                            </button>
                            <span id="register-confirm-error" class="hidden absolute -bottom-5 left-0 text-danger text-xs">
                                <i class="fa fa-exclamation-circle mr-1"></i> 两次输入的密码不一致
                            </span>
                        </div>
                    </div>
                    
                    <!-- 验证码 -->
                    <div class="mb-6">
                        <label class="block text-sm font-medium mb-2">验证</label>
                        <div id="register-captcha" class="bg-dark/60 border border-light/20 rounded-lg p-4 mb-3">
                            <p class="text-sm mb-3">请点击图中所有的 <span id="register-captcha-target" class="font-bold text-primary">汽车</span></p>
                            <div id="register-captcha-images" class="grid grid-cols-3 gap-2 mb-3">
                                <!-- 验证码图片将通过JS生成 -->
                            </div>
                            <div class="flex justify-between items-center">
                                <span class="text-xs text-light/60">点击图片选择，再次点击取消</span>
                                <button type="button" id="refresh-register-captcha" class="text-xs text-primary hover:underline">
                                    换一组
                                </button>
                            </div>
                        </div>
                        <span id="register-captcha-error" class="hidden block text-danger text-xs">
                            <i class="fa fa-exclamation-circle mr-1"></i> 请完成验证
                        </span>
                    </div>
                    
                    <div class="mb-6 flex items-start">
                        <input type="checkbox" id="terms" class="mt-1 w-4 h-4 rounded border-light/30 bg-dark/40 text-primary focus:ring-primary">
                        <label for="terms" class="ml-2 text-sm text-light/80">
                            我同意<a href="#" class="text-primary hover:underline">服务条款</a>和<a href="#" class="text-primary hover:underline">隐私政策</a>
                        </label>
                        <span id="terms-error" class="hidden block text-danger text-xs mt-1">
                            <i class="fa fa-exclamation-circle mr-1"></i> 请同意服务条款和隐私政策
                        </span>
                    </div>
                    
                    <button type="submit" id="register-button" class="btn-game w-full mb-4 animate-glow">
                        创建账号
                    </button>
                    
                    <p class="text-center text-sm text-light/60">
                        已有账号? <a href="#" id="switch-to-login" class="text-primary hover:underline font-medium">立即登录</a>
                    </p>
                </div>
                
                <!-- 忘记密码表单 -->
                <div id="forgot-password-form" class="p-6 lg:p-8 hidden animate-slide-up">
                    <h3 class="text-xl font-semibold mb-6 text-center">找回密码</h3>
                    
                    <p class="text-sm text-light/70 mb-6">
                        请输入您注册的邮箱地址，我们将发送重置密码的链接到您的邮箱
                    </p>
                    
                    <div class="mb-6">
                        <label for="forgot-email" class="block text-sm font-medium mb-2">邮箱</label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-light/50">
                                <i class="fa fa-envelope"></i>
                            </span>
                            <input type="email" id="forgot-email" 
                                class="w-full pl-10 pr-4 py-3 bg-dark/40 border border-light/20 rounded-lg input-focus transition-all"
                                placeholder="your@email.com" required>
                            <span id="forgot-email-error" class="hidden absolute -bottom-5 left-0 text-danger text-xs">
                                <i class="fa fa-exclamation-circle mr-1"></i> 请输入有效的邮箱地址
                            </span>
                        </div>
                    </div>
                    
                    <!-- 验证码 -->
                        <div class="mb-6">
                            <label class="block text-sm font-medium mb-2">验证码</label>
                            <div class="flex gap-3">
                                <div class="relative flex-1">
                                    <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-light/50">
                                        <i class="fa fa-key"></i>
                                    </span>
                                    <input type="text" id="forgot-captcha" 
                                        class="w-full pl-10 pr-4 py-3 bg-dark/40 border border-light/20 rounded-lg input-focus transition-all"
                                        placeholder="请输入验证码" required>
                                    <span id="forgot-captcha-error" class="hidden absolute -bottom-5 left-0 text-danger text-xs">
                                        <i class="fa fa-exclamation-circle mr-1"></i> 验证码不正确
                                    </span>
                                </div>
                                <div id="forgot-captcha-image" class="bg-dark/60 border border-light/20 rounded-lg p-2 flex items-center justify-center min-w-[120px]">
                                    <!-- 验证码将通过JS生成 -->
                                </div>
                                <button type="button" id="refresh-forgot-captcha" class="text-light/60 hover:text-primary transition-colors flex items-center justify-center">
                                    <i class="fa fa-refresh"></i>
                                </button>
                            </div>
                        </div>
                        
                        <!-- 邮箱验证码 -->
                        <div class="mb-6">
                            <label for="email-verification-code" class="block text-sm font-medium mb-2">邮箱验证码</label>
                            <div class="flex gap-3">
                                <div class="relative flex-1">
                                    <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-light/50">
                                        <i class="fa fa-shield"></i>
                                    </span>
                                    <input type="text" id="email-verification-code" 
                                        class="w-full pl-10 pr-4 py-3 bg-dark/40 border border-light/20 rounded-lg input-focus transition-all"
                                        placeholder="请输入邮箱验证码" required>
                                    <span id="email-verification-error" class="hidden absolute -bottom-5 left-0 text-danger text-xs">
                                        <i class="fa fa-exclamation-circle mr-1"></i> 验证码不正确或已过期
                                    </span>
                                </div>
                                <button type="button" id="send-verification-code" class="btn-outline py-3 px-4 whitespace-nowrap">
                                    发送验证码
                                </button>
                            </div>
                        </div>
                    
                    <button type="submit" id="forgot-button" class="btn-game w-full mb-4">
                        发送重置链接
                    </button>
                    
                    <p class="text-center text-sm text-light/60">
                        想起密码了? <a href="#" id="back-to-login" class="text-primary hover:underline font-medium">返回登录</a>
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="absolute bottom-4 left-0 right-0 z-10 text-center text-light/50 text-sm">
        <p>© 2023 游戏世界. 保留所有权利.</p>
    </footer>

    <!-- JavaScript -->
    <script>
        // 全局变量存储验证码答案
        let loginCaptchaAnswer = '';
        let forgotCaptchaAnswer = '';
        let registerCaptchaAnswers = [];
        let selectedRegisterCaptcha = [];
        const registerCaptchaTargets = ['汽车', '飞机', '自行车', '红绿灯', '小狗'];
        
        // 账户安全相关变量
        let failedLoginAttempts = 0;
        const MAX_FAILED_ATTEMPTS = 5;
        let accountLockedUntil = null;
        let sentVerificationCode = '';
        let verificationCodeExpires = null;

        // DOM加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化验证码
            generateLoginCaptcha();
            generateForgotCaptcha();
            generateRegisterCaptcha();
            
            // 检查本地存储的用户信息
            loadSavedUserInfo();
            
            // 绑定表单切换事件
            bindFormSwitchEvents();
            
            // 绑定密码显示/隐藏事件
            bindPasswordToggleEvents();
            
            // 绑定表单提交事件
            bindFormSubmitEvents();
            
            // 绑定社交登录事件
            bindSocialLoginEvents();
            
            // 绑定验证码刷新事件
            bindCaptchaRefreshEvents();
            
            // 绑定注册表单验证事件
            bindRegisterFormValidation();
        });
        
        // 表单切换功能
        function bindFormSwitchEvents() {
            const loginTab = document.getElementById('login-tab');
            const registerTab = document.getElementById('register-tab');
            const loginForm = document.getElementById('login-form');
            const registerForm = document.getElementById('register-form');
            const forgotPasswordForm = document.getElementById('forgot-password-form');
            const switchToRegister = document.getElementById('switch-to-register');
            const switchToLogin = document.getElementById('switch-to-login');
            const forgotPasswordLink = document.getElementById('forgot-password-link');
            const backToLogin = document.getElementById('back-to-login');
            
            // 显示登录表单
            function showLoginForm() {
                loginForm.classList.remove('hidden');
                registerForm.classList.add('hidden');
                forgotPasswordForm.classList.add('hidden');
                loginTab.classList.add('text-primary', 'border-b-2', 'border-primary');
                loginTab.classList.remove('text-light/60');
                registerTab.classList.remove('text-primary', 'border-b-2', 'border-primary');
                registerTab.classList.add('text-light/60');
                clearMessages();
            }
            
            // 显示注册表单
            function showRegisterForm() {
                registerForm.classList.remove('hidden');
                loginForm.classList.add('hidden');
                forgotPasswordForm.classList.add('hidden');
                registerTab.classList.add('text-primary', 'border-b-2', 'border-primary');
                registerTab.classList.remove('text-light/60');
                loginTab.classList.remove('text-primary', 'border-b-2', 'border-primary');
                loginTab.classList.add('text-light/60');
                clearMessages();
                // 刷新注册验证码
                generateRegisterCaptcha();
            }
            
            // 显示忘记密码表单
            function showForgotPasswordForm() {
                forgotPasswordForm.classList.remove('hidden');
                loginForm.classList.add('hidden');
                registerForm.classList.add('hidden');
                loginTab.classList.remove('text-primary', 'border-b-2', 'border-primary');
                loginTab.classList.add('text-light/60');
                registerTab.classList.remove('text-primary', 'border-b-2', 'border-primary');
                registerTab.classList.add('text-light/60');
                clearMessages();
                // 刷新忘记密码验证码
                generateForgotCaptcha();
            }
            
            // 绑定事件
            loginTab.addEventListener('click', showLoginForm);
            registerTab.addEventListener('click', showRegisterForm);
            switchToRegister.addEventListener('click', (e) => {
                e.preventDefault();
                showRegisterForm();
            });
            switchToLogin.addEventListener('click', (e) => {
                e.preventDefault();
                showLoginForm();
            });
            forgotPasswordLink.addEventListener('click', (e) => {
                e.preventDefault();
                showForgotPasswordForm();
            });
            backToLogin.addEventListener('click', (e) => {
                e.preventDefault();
                showLoginForm();
            });
        }
        
        // 密码显示/隐藏功能
        function bindPasswordToggleEvents() {
            const toggleButtons = document.querySelectorAll('.password-toggle');
            
            toggleButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const input = this.parentElement.querySelector('input');
                    const icon = this.querySelector('i');
                    
                    if (input.type === 'password') {
                        input.type = 'text';
                        icon.classList.remove('fa-eye-slash');
                        icon.classList.add('fa-eye');
                    } else {
                        input.type = 'password';
                        icon.classList.remove('fa-eye');
                        icon.classList.add('fa-eye-slash');
                    }
                });
            });
        }
        
        // 表单提交事件
        function bindFormSubmitEvents() {
            // 登录表单提交
            document.getElementById('login-form').addEventListener('submit', function(e) {
                e.preventDefault();
                if (validateLoginForm()) {
                    // 模拟登录请求
                    showLoading(document.getElementById('login-button'), '登录中...');
                    
                    // 模拟登录验证（这里简化处理，实际应与后端验证）
                    setTimeout(() => {
                        resetButton(document.getElementById('login-button'), '登录游戏');
                        
                        // 模拟验证逻辑（实际应在后端进行）
                        // 这里假设如果密码包含'error'则登录失败，用于演示
                        const isLoginSuccessful = !document.getElementById('login-password').value.includes('error');
                        
                        if (isLoginSuccessful) {
                            // 登录成功，重置失败次数
                            failedLoginAttempts = 0;
                            
                            // 检查"记住我"选项
                            if (document.getElementById('remember-me').checked) {
                                saveUserInfo();
                            } else {
                                clearUserInfo();
                            }
                            
                            showSuccessMessage('登录成功，正在进入游戏...');
                            
                            // 登录成功后显示游戏内容，不再跳转到会员页面
                            setTimeout(() => {
                                // 显示游戏内容区域
                                const gameContent = document.getElementById('game-content');
                                const formArea = document.querySelector('.relative.z-10 > div:not(#game-content)');
                                if (gameContent && formArea) {
                                    gameContent.classList.remove('hidden');
                                    formArea.classList.add('hidden');
                                    // 更新页面标题
                                    document.title = '游戏世界 - 探索无限可能';
                                }
                            }, 1500);
                        } else {
                            // 登录失败，增加失败次数
                            failedLoginAttempts++;
                            
                            // 显示失败信息
                            showMessage('login-message', '邮箱或密码错误，请重试', 'error');
                            
                            // 刷新验证码
                            generateLoginCaptcha();
                            
                            // 检查是否需要锁定账户
                            if (failedLoginAttempts >= MAX_FAILED_ATTEMPTS) {
                                // 锁定账户15分钟
                                accountLockedUntil = Date.now() + (15 * 60 * 1000);
                                showMessage('login-message', `账户已被锁定，15分钟后再试`, 'error');
                            } else {
                                // 提示剩余尝试次数
                                const remainingAttempts = MAX_FAILED_ATTEMPTS - failedLoginAttempts;
                                showMessage('login-message', `登录失败，还剩${remainingAttempts}次尝试机会`, 'error');
                            }
                        }
                    }, 1500);
                } else {
                    // 表单验证失败，添加抖动效果
                    this.classList.add('animate-shake');
                    setTimeout(() => {
                        this.classList.remove('animate-shake');
                    }, 500);
                }
            });
            
            // 注册表单提交
            document.getElementById('register-form').addEventListener('submit', function(e) {
                e.preventDefault();
                if (validateRegisterForm()) {
                    // 模拟注册请求
                    showLoading(document.getElementById('register-button'), '注册中...');
                    
                    setTimeout(() => {
                        resetButton(document.getElementById('register-button'), '创建账号');
                        showSuccessMessage('注册成功，请登录！');
                        
                        // 3秒后切换到登录表单
                        setTimeout(() => {
                            document.getElementById('login-tab').click();
                            // 自动填充邮箱
                            document.getElementById('login-email').value = document.getElementById('register-email').value;
                        }, 1500);
                    }, 1500);
                } else {
                    // 表单验证失败，添加抖动效果
                    this.classList.add('animate-shake');
                    setTimeout(() => {
                        this.classList.remove('animate-shake');
                    }, 500);
                }
            });
            
            // 发送邮箱验证码
            document.getElementById('send-verification-code').addEventListener('click', function() {
                const email = document.getElementById('forgot-email').value;
                const captcha = document.getElementById('forgot-captcha').value;
                const button = this;
                
                // 验证邮箱和图形验证码
                if (!isValidEmail(email)) {
                    showError(document.getElementById('forgot-email'), document.getElementById('forgot-email-error'));
                    return;
                }
                
                if (captcha.trim().toUpperCase() !== forgotCaptchaAnswer) {
                    showError(document.getElementById('forgot-captcha'), document.getElementById('forgot-captcha-error'));
                    return;
                }
                
                // 禁用按钮并显示倒计时
                let countdown = 60;
                button.disabled = true;
                button.textContent = `${countdown}秒后重新发送`;
                button.classList.add('opacity-70', 'cursor-not-allowed');
                
                // 生成验证码（6位数字）
                sentVerificationCode = Math.floor(100000 + Math.random() * 900000).toString();
                // 设置验证码有效期为10分钟
                verificationCodeExpires = Date.now() + (10 * 60 * 1000);
                
                // 模拟发送验证码
                console.log(`验证码 ${sentVerificationCode} 已发送至 ${email}`);
                showMessage('login-message', `验证码已发送至 ${email}，请注意查收`, 'success');
                
                // 倒计时
                const timer = setInterval(() => {
                    countdown--;
                    button.textContent = `${countdown}秒后重新发送`;
                    
                    if (countdown <= 0) {
                        clearInterval(timer);
                        button.disabled = false;
                        button.textContent = '发送验证码';
                        button.classList.remove('opacity-70', 'cursor-not-allowed');
                    }
                }, 1000);
            });
            
            // 忘记密码表单提交
            document.getElementById('forgot-password-form').addEventListener('submit', function(e) {
                e.preventDefault();
                if (validateForgotPasswordForm()) {
                    // 验证邮箱验证码
                    const emailVerificationCode = document.getElementById('email-verification-code').value;
                    const isCodeValid = validateEmailVerificationCode(emailVerificationCode);
                    
                    if (!isCodeValid) {
                        showError(document.getElementById('email-verification-code'), document.getElementById('email-verification-error'));
                        return;
                    }
                    
                    // 模拟发送邮件请求
                    showLoading(document.getElementById('forgot-button'), '发送中...');
                    
                    setTimeout(() => {
                        resetButton(document.getElementById('forgot-button'), '发送重置链接');
                        showSuccessMessage('重置密码链接已发送到您的邮箱');
                        
                        // 重置验证码状态
                        sentVerificationCode = null;
                        verificationCodeExpires = null;
                        
                        // 3秒后切换到登录表单
                        setTimeout(() => {
                            document.getElementById('login-tab').click();
                        }, 1500);
                    }, 1500);
                } else {
                    // 表单验证失败，添加抖动效果
                    this.classList.add('animate-shake');
                    setTimeout(() => {
                        this.classList.remove('animate-shake');
                    }, 500);
                }
            });
        }
        
        // 社交登录事件
        function bindSocialLoginEvents() {
            const socialButtons = document.querySelectorAll('.social-login');
            
            socialButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const provider = this.getAttribute('data-provider');
                    const providerNames = {
                        'facebook': 'Facebook',
                        'google': 'Google',
                        'steam': 'Steam',
                        'twitter': 'Twitter'
                    };
                    
                    // 显示加载状态
                    const originalContent = this.innerHTML;
                    this.innerHTML = '<i class="fa fa-spinner fa-spin"></i>';
                    this.disabled = true;
                    
                    // 模拟社交登录过程
                    setTimeout(() => {
                        this.innerHTML = originalContent;
                        this.disabled = false;
                        showSuccessMessage(`正在通过${providerNames[provider]}登录...`);
                        
                        setTimeout(() => {
                            // 显示游戏内容区域，不再跳转到会员页面
                            const gameContent = document.getElementById('game-content');
                            const formArea = document.querySelector('.relative.z-10 > div:not(#game-content)');
                            if (gameContent && formArea) {
                                gameContent.classList.remove('hidden');
                                formArea.classList.add('hidden');
                                // 更新页面标题
                                document.title = '游戏世界 - 探索无限可能';
                            }
                        }, 1000);
                    }, 1500);
                });
            });
        }
        
        // 生成登录验证码
        function generateLoginCaptcha() {
            const canvas = document.createElement('canvas');
            canvas.width = 100;
            canvas.height = 40;
            const ctx = canvas.getContext('2d');
            
            // 背景
            ctx.fillStyle = '#2D3436';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            
            // 随机字符串
            const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';
            let captcha = '';
            for (let i = 0; i < 4; i++) {
                captcha += chars.charAt(Math.floor(Math.random() * chars.length));
            }
            loginCaptchaAnswer = captcha;
            
            // 绘制文本
            ctx.font = '20px Arial';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            
            // 每个字符不同颜色和旋转
            for (let i = 0; i < captcha.length; i++) {
                const color = `rgba(${Math.random() * 100 + 155}, ${Math.random() * 100 + 155}, ${Math.random() * 100 + 155}, 1)`;
                ctx.fillStyle = color;
                
                // 保存当前状态
                ctx.save();
                
                // 移动到位置并旋转
                ctx.translate(20 + i * 20, 20);
                ctx.rotate((Math.random() - 0.5) * 0.5);
                
                // 绘制字符
                ctx.fillText(captcha.charAt(i), 0, 0);
                
                // 恢复状态
                ctx.restore();
            }
            
            // 添加干扰线
            for (let i = 0; i < 3; i++) {
                ctx.strokeStyle = `rgba(${Math.random() * 100 + 155}, ${Math.random() * 100 + 155}, ${Math.random() * 100 + 155}, 0.7)`;
                ctx.beginPath();
                ctx.moveTo(Math.random() * canvas.width, Math.random() * canvas.height);
                ctx.lineTo(Math.random() * canvas.width, Math.random() * canvas.height);
                ctx.lineWidth = 1;
                ctx.stroke();
            }
            
            // 添加干扰点
            for (let i = 0; i < 30; i++) {
                ctx.fillStyle = `rgba(${Math.random() * 100 + 155}, ${Math.random() * 100 + 155}, ${Math.random() * 100 + 155}, 0.7)`;
                ctx.beginPath();
                ctx.arc(Math.random() * canvas.width, Math.random() * canvas.height, 1, 0, 2 * Math.PI);
                ctx.fill();
            }
            
            // 更新验证码图像
            document.getElementById('login-captcha-image').innerHTML = '';
            document.getElementById('login-captcha-image').appendChild(canvas);
        }
        
        // 生成忘记密码验证码
        function generateForgotCaptcha() {
            const canvas = document.createElement('canvas');
            canvas.width = 100;
            canvas.height = 40;
            const ctx = canvas.getContext('2d');
            
            // 背景
            ctx.fillStyle = '#2D3436';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            
            // 随机字符串
            const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';
            let captcha = '';
            for (let i = 0; i < 4; i++) {
                captcha += chars.charAt(Math.floor(Math.random() * chars.length));
            }
            forgotCaptchaAnswer = captcha;
            
            // 绘制文本
            ctx.font = '20px Arial';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            
            // 每个字符不同颜色和旋转
            for (let i = 0; i < captcha.length; i++) {
                const color = `rgba(${Math.random() * 100 + 155}, ${Math.random() * 100 + 155}, ${Math.random() * 100 + 155}, 1)`;
                ctx.fillStyle = color;
                
                // 保存当前状态
                ctx.save();
                
                // 移动到位置并旋转
                ctx.translate(20 + i * 20, 20);
                ctx.rotate((Math.random() - 0.5) * 0.5);
                
                // 绘制字符
                ctx.fillText(captcha.charAt(i), 0, 0);
                
                // 恢复状态
                ctx.restore();
            }
            
            // 添加干扰线
            for (let i = 0; i < 3; i++) {
                ctx.strokeStyle = `rgba(${Math.random() * 100 + 155}, ${Math.random() * 100 + 155}, ${Math.random() * 100 + 155}, 0.7)`;
                ctx.beginPath();
                ctx.moveTo(Math.random() * canvas.width, Math.random() * canvas.height);
                ctx.lineTo(Math.random() * canvas.width, Math.random() * canvas.height);
                ctx.lineWidth = 1;
                ctx.stroke();
            }
            
            // 更新验证码图像
            document.getElementById('forgot-captcha-image').innerHTML = '';
            document.getElementById('forgot-captcha-image').appendChild(canvas);
        }
        
        // 生成注册验证码（图文验证）
        function generateRegisterCaptcha() {
            // 随机选择一个目标
            const targetIndex = Math.floor(Math.random() * registerCaptchaTargets.length);
            const target = registerCaptchaTargets[targetIndex];
            document.getElementById('register-captcha-target').textContent = target;
            
            // 生成9个图片位置
            const container = document.getElementById('register-captcha-images');
            container.innerHTML = '';
            
            // 随机选择2-4个位置作为答案
            registerCaptchaAnswers = [];
            selectedRegisterCaptcha = [];
            const answerCount = Math.floor(Math.random() * 3) + 2; // 2-4个答案
            
            for (let i = 0; i < 9; i++) {
                const imgContainer = document.createElement('div');
                imgContainer.className = 'aspect-square bg-dark/40 rounded overflow-hidden cursor-pointer hover:opacity-90 transition-opacity relative';
                imgContainer.dataset.index = i;
                
                // 随机图片
                const img = document.createElement('img');
                // 使用picsum提供随机图片，根据是否是答案使用不同的图片集
                let isAnswer = false;
                if (registerCaptchaAnswers.length < answerCount && Math.random() > 0.7) {
                    isAnswer = true;
                    registerCaptchaAnswers.push(i);
                    // 根据目标选择相关图片
                    let category = '';
                    switch(target) {
                        case '汽车': category = '1071'; break;
                        case '飞机': category = '1059'; break;
                        case '自行车': category = '1076'; break;
                        case '红绿灯': category = '1067'; break;
                        case '小狗': category = '237'; break;
                    }
                    img.src = `https://picsum.photos/seed/${category}${i}/100/100`;
                } else {
                    // 非答案图片
                    img.src = `https://picsum.photos/seed/${i}${Date.now()}/100/100`;
                }
                
                img.alt = isAnswer ? target : '随机图片';
                img.className = 'w-full h-full object-cover';
                
                imgContainer.appendChild(img);
                
                // 选中状态指示器
                const checkMark = document.createElement('div');
                checkMark.className = 'hidden absolute inset-0 bg-primary/50 flex items-center justify-center';
                checkMark.innerHTML = '<i class="fa fa-check text-white text-xl"></i>';
                imgContainer.appendChild(checkMark);
                
                // 点击事件
                imgContainer.addEventListener('click', function() {
                    const index = parseInt(this.dataset.index);
                    const checkMark = this.querySelector('div');
                    
                    // 切换选中状态
                    const selectedIndex = selectedRegisterCaptcha.indexOf(index);
                    if (selectedIndex === -1) {
                        selectedRegisterCaptcha.push(index);
                        checkMark.classList.remove('hidden');
                    } else {
                        selectedRegisterCaptcha.splice(selectedIndex, 1);
                        checkMark.classList.add('hidden');
                    }
                    
                    // 验证时清除错误提示
                    document.getElementById('register-captcha-error').classList.add('hidden');
                });
                
                container.appendChild(imgContainer);
            }
        }
        
        // 绑定验证码刷新事件
        function bindCaptchaRefreshEvents() {
            document.getElementById('refresh-login-captcha').addEventListener('click', generateLoginCaptcha);
            document.getElementById('refresh-forgot-captcha').addEventListener('click', generateForgotCaptcha);
            document.getElementById('refresh-register-captcha').addEventListener('click', generateRegisterCaptcha);
        }
        
        // 注册表单验证相关事件
        function bindRegisterFormValidation() {
            // 密码强度检测
            const passwordInput = document.getElementById('register-password');
            passwordInput.addEventListener('input', checkPasswordStrength);
            
            // 实时验证用户名
            document.getElementById('register-username').addEventListener('blur', validateUsername);
            
            // 实时验证邮箱
            document.getElementById('register-email').addEventListener('blur', validateEmail);
            
            // 实时验证确认密码
            document.getElementById('register-confirm').addEventListener('input', validateConfirmPassword);
            
            // 条款勾选验证
            document.getElementById('terms').addEventListener('change', function() {
                if (this.checked) {
                    document.getElementById('terms-error').classList.add('hidden');
                }
            });
        }
        
        // 检查密码强度
        function checkPasswordStrength() {
            const password = document.getElementById('register-password').value;
            let strength = 0;
            let details = [];
            let strengthText = '';
            let barColor = '';
            
            const strengthContainer = document.getElementById('password-strength-container');
            const strengthBar = document.getElementById('password-strength-bar');
            const strengthTextEl = document.getElementById('password-strength-text');
            const strengthDetails = document.getElementById('password-strength-details');
            
            // 如果密码为空，隐藏强度指示器
            if (!password) {
                strengthContainer.classList.add('hidden');
                return;
            }
            
            // 显示强度指示器
            strengthContainer.classList.remove('hidden');
            
            // 密码长度检查
            if (password.length >= 8) {
                strength += 1;
                details.push('<i class="fa fa-check text-success mr-1"></i> 长度足够');
            } else {
                details.push('<i class="fa fa-times text-danger mr-1"></i> 长度至少8个字符');
            }
            
            // 包含小写字母
            if (/[a-z]/.test(password)) {
                strength += 1;
                details.push('<i class="fa fa-check text-success mr-1"></i> 包含小写字母');
            } else {
                details.push('<i class="fa fa-times text-danger mr-1"></i> 添加小写字母');
            }
            
            // 包含大写字母
            if (/[A-Z]/.test(password)) {
                strength += 1;
                details.push('<i class="fa fa-check text-success mr-1"></i> 包含大写字母');
            } else {
                details.push('<i class="fa fa-times text-danger mr-1"></i> 添加大写字母');
            }
            
            // 包含数字
            if (/[0-9]/.test(password)) {
                strength += 1;
                details.push('<i class="fa fa-check text-success mr-1"></i> 包含数字');
            } else {
                details.push('<i class="fa fa-times text-danger mr-1"></i> 添加数字');
            }
            
            // 包含特殊字符
            if (/[^A-Za-z0-9]/.test(password)) {
                strength += 1;
                details.push('<i class="fa fa-check text-success mr-1"></i> 包含特殊字符');
            } else {
                details.push('<i class="fa fa-times text-danger mr-1"></i> 添加特殊字符');
            }
            
            // 密码复杂度评分（额外加分）
            const uniqueChars = new Set(password).size;
            if (uniqueChars >= password.length * 0.7) {
                strength += 1;
                details.push('<i class="fa fa-check text-success mr-1"></i> 字符多样性良好');
            } else {
                details.push('<i class="fa fa-times text-danger mr-1"></i> 增加字符多样性');
            }
            
            // 设置强度文本和颜色
            const maxScore = 6;
            const percentage = (strength / maxScore) * 100;
            
            if (percentage < 30) {
                strengthText = '极弱';
                barColor = 'bg-danger';
            } else if (percentage < 50) {
                strengthText = '弱';
                barColor = 'bg-warning';
            } else if (percentage < 70) {
                strengthText = '中等';
                barColor = 'bg-yellow';
            } else if (percentage < 90) {
                strengthText = '强';
                barColor = 'bg-green';
            } else {
                strengthText = '极强';
                barColor = 'bg-success';
            }
            
            // 更新DOM
            strengthBar.style.width = `${percentage}%`;
            
            // 移除所有颜色类并添加新的颜色类
            strengthBar.className = 'h-full transition-all duration-300 ' + barColor;
            
            strengthTextEl.textContent = '密码强度: ' + strengthText;
            strengthDetails.innerHTML = details.join('<br>');
        }
        
        // 验证登录表单
        function validateLoginForm() {
            let isValid = true;
            const email = document.getElementById('login-email');
            const password = document.getElementById('login-password');
            const captcha = document.getElementById('login-captcha');
            
            // 检查账户是否被锁定
            if (accountLockedUntil && Date.now() < accountLockedUntil) {
                const remainingMinutes = Math.ceil((accountLockedUntil - Date.now()) / (1000 * 60));
                showMessage('login-message', `账户已被锁定，请${remainingMinutes}分钟后再试`, 'error');
                return false;
            } else if (accountLockedUntil) {
                // 锁定时间已过，重置锁定状态
                accountLockedUntil = null;
                failedLoginAttempts = 0;
            }
            
            // 验证邮箱
            if (!isValidEmail(email.value)) {
                showError(email, document.getElementById('login-email-error'));
                isValid = false;
            } else {
                hideError(email, document.getElementById('login-email-error'));
            }
            
            // 验证密码
            if (password.value.trim() === '') {
                showError(password, document.getElementById('login-password-error'));
                isValid = false;
            } else {
                hideError(password, document.getElementById('login-password-error'));
            }
            
            // 验证验证码
            if (captcha.value.trim().toUpperCase() !== loginCaptchaAnswer) {
                showError(captcha, document.getElementById('login-captcha-error'));
                isValid = false;
            } else {
                hideError(captcha, document.getElementById('login-captcha-error'));
            }
            
            return isValid;
        }
        
        // 验证注册表单
        function validateRegisterForm() {
            let isValid = true;
            
            // 验证用户名
            if (!validateUsername()) isValid = false;
            
            // 验证邮箱
            if (!validateEmail()) isValid = false;
            
            // 验证密码
            if (!validatePassword()) isValid = false;
            
            // 验证确认密码
            if (!validateConfirmPassword()) isValid = false;
            
            // 验证验证码
            if (!validateRegisterCaptcha()) isValid = false;
            
            // 验证条款
            if (!document.getElementById('terms').checked) {
                document.getElementById('terms-error').classList.remove('hidden');
                isValid = false;
            } else {
                document.getElementById('terms-error').classList.add('hidden');
            }
            
            return isValid;
        }
        
        // 验证忘记密码表单
        function validateForgotPasswordForm() {
            let isValid = true;
            const email = document.getElementById('forgot-email');
            const captcha = document.getElementById('forgot-captcha');
            const emailVerificationCode = document.getElementById('email-verification-code');
            
            // 验证邮箱
            if (!isValidEmail(email.value)) {
                showError(email, document.getElementById('forgot-email-error'));
                isValid = false;
            } else {
                hideError(email, document.getElementById('forgot-email-error'));
            }
            
            // 验证验证码
            if (captcha.value.trim().toUpperCase() !== forgotCaptchaAnswer) {
                showError(captcha, document.getElementById('forgot-captcha-error'));
                isValid = false;
            } else {
                hideError(captcha, document.getElementById('forgot-captcha-error'));
            }
            
            // 验证邮箱验证码
            if (!emailVerificationCode.value.trim()) {
                showError(emailVerificationCode, document.getElementById('email-verification-error'));
                isValid = false;
            } else if (emailVerificationCode.value.trim() !== sentVerificationCode) {
                showError(emailVerificationCode, document.getElementById('email-verification-error'));
                isValid = false;
            } else if (verificationCodeExpires && Date.now() > verificationCodeExpires) {
                showError(emailVerificationCode, document.getElementById('email-verification-error'));
                document.getElementById('email-verification-error').textContent = '验证码已过期，请重新获取';
                isValid = false;
            } else {
                hideError(emailVerificationCode, document.getElementById('email-verification-error'));
            }
            
            return isValid;
        }
        
        // 验证用户名
        function validateUsername() {
            const username = document.getElementById('register-username');
            const error = document.getElementById('register-username-error');
            
            if (username.value.trim().length < 4 || username.value.trim().length > 16) {
                showError(username, error);
                return false;
            } else {
                hideError(username, error);
                return true;
            }
        }
        
        // 验证邮箱
        function validateEmail() {
            const email = document.getElementById('register-email');
            const error = document.getElementById('register-email-error');
            
            if (!isValidEmail(email.value)) {
                showError(email, error);
                return false;
            } else {
                hideError(email, error);
                // 模拟检查邮箱是否已存在
                const existsError = document.getElementById('register-email-exists');
                if (email.value === 'test@example.com') {
                    showError(email, existsError);
                    return false;
                } else {
                    hideError(email, existsError);
                    return true;
                }
            }
        }
        
        // 验证密码
        function validatePassword() {
            const password = document.getElementById('register-password');
            const error = document.getElementById('register-password-error');
            const passwordRegex = /^(?=.*[A-Za-z])(?=.*\d).{8,}$/;
            
            if (!passwordRegex.test(password.value)) {
                showError(password, error);
                return false;
            } else {
                hideError(password, error);
                return true;
            }
        }
        
        // 验证确认密码
        function validateConfirmPassword() {
            const password = document.getElementById('register-password');
            const confirm = document.getElementById('register-confirm');
            const error = document.getElementById('register-confirm-error');
            
            if (confirm.value !== password.value) {
                showError(confirm, error);
                return false;
            } else {
                hideError(confirm, error);
                return true;
            }
        }
        
        // 验证注册验证码
        function validateRegisterCaptcha() {
            const error = document.getElementById('register-captcha-error');
            
            // 检查选中的是否与答案完全匹配
            if (selectedRegisterCaptcha.length !== registerCaptchaAnswers.length) {
                error.classList.remove('hidden');
                return false;
            }
            
            // 检查每个元素是否匹配
            for (let i = 0; i < registerCaptchaAnswers.length; i++) {
                if (!selectedRegisterCaptcha.includes(registerCaptchaAnswers[i])) {
                    error.classList.remove('hidden');
                    return false;
                }
            }
            
            error.classList.add('hidden');
            return true;
        }
        
        // 显示错误提示
        function showError(input, errorElement) {
            input.classList.add('input-error');
            input.classList.remove('input-success');
            errorElement.classList.remove('hidden');
        }
        
        // 隐藏错误提示
        function hideError(input, errorElement) {
            input.classList.remove('input-error');
            input.classList.add('input-success');
            errorElement.classList.add('hidden');
        }
        
        // 邮箱格式验证
        function isValidEmail(email) {
            const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
            return re.test(email);
        }
        
        // 显示成功消息
        function showSuccessMessage(text) {
            const messageBox = document.getElementById('message-box');
            const successMessage = document.getElementById('success-message');
            const errorMessage = document.getElementById('error-message');
            const successText = document.getElementById('success-text');
            
            successText.textContent = text;
            messageBox.classList.remove('hidden');
            successMessage.classList.remove('hidden');
            errorMessage.classList.add('hidden');
            
            // 5秒后自动隐藏
            setTimeout(clearMessages, 5000);
        }
        
        // 显示错误消息
        function showErrorMessage(text) {
            const messageBox = document.getElementById('message-box');
            const successMessage = document.getElementById('success-message');
            const errorMessage = document.getElementById('error-message');
            const errorText = document.getElementById('error-text');
            
            errorText.textContent = text;
            messageBox.classList.remove('hidden');
            errorMessage.classList.remove('hidden');
            successMessage.classList.add('hidden');
            
            // 5秒后自动隐藏
            setTimeout(clearMessages, 5000);
        }
        
        // 清除消息
        function clearMessages() {
            const messageBox = document.getElementById('message-box');
            const successMessage = document.getElementById('success-message');
            const errorMessage = document.getElementById('error-message');
            
            messageBox.classList.add('hidden');
            successMessage.classList.add('hidden');
            errorMessage.classList.add('hidden');
        }
        
        // 显示按钮加载状态
        function showLoading(button, text) {
            button.disabled = true;
            button.innerHTML = `<i class="fa fa-spinner fa-spin mr-2"></i>${text}`;
        }
        
        // 重置按钮状态
        function resetButton(button, text) {
            button.disabled = false;
            button.innerHTML = text;
        }
        
        // 保存用户信息到本地存储
        function saveUserInfo() {
            const email = document.getElementById('login-email').value;
            localStorage.setItem('savedEmail', email);
            localStorage.setItem('rememberMe', 'true');
        }
        
        // 从本地存储加载用户信息
        function loadSavedUserInfo() {
            if (localStorage.getItem('rememberMe') === 'true') {
                const email = localStorage.getItem('savedEmail');
                if (email) {
                    document.getElementById('login-email').value = email;
                    document.getElementById('remember-me').checked = true;
                }
            }
        }
        
        // 清除本地存储的用户信息
        function clearUserInfo() {
            localStorage.removeItem('savedEmail');
            localStorage.removeItem('rememberMe');
        }
    </script>
    <!-- 波纹效果 JavaScript -->
    <script>
        // 波纹效果函数
        function createRipple(event) {
            const container = event.currentTarget;
            const ripple = document.createElement('span');
            const rect = container.getBoundingClientRect();
            const size = Math.max(rect.width, rect.height);
            const x = event.clientX - rect.left - size / 2;
            const y = event.clientY - rect.top - size / 2;
            
            ripple.classList.add('ripple');
            ripple.style.width = ripple.style.height = `${size}px`;
            ripple.style.left = `${x}px`;
            ripple.style.top = `${y}px`;
            
            // 根据容器的颜色动态设置波纹颜色
            const computedStyle = window.getComputedStyle(container);
            const bgColor = computedStyle.backgroundColor;
            
            // 为不同的按钮类型设置不同的波纹颜色
            if (container.classList.contains('btn-game')) {
                ripple.style.backgroundColor = 'rgba(255, 255, 255, 0.4)';
            } else if (container.classList.contains('btn-outline')) {
                ripple.style.backgroundColor = 'rgba(108, 92, 231, 0.4)';
            } else {
                ripple.style.backgroundColor = 'rgba(255, 255, 255, 0.2)';
            }
            
            container.appendChild(ripple);
            
            // 动画结束后移除波纹元素
            setTimeout(() => {
                ripple.remove();
            }, 600);
        }
        
        // 为所有带有ripple-container类的元素添加点击事件
        document.addEventListener('DOMContentLoaded', () => {
            const rippleElements = document.querySelectorAll('.ripple-container');
            
            rippleElements.forEach(element => {
                element.addEventListener('click', createRipple);
            });
            
            // 添加退出登录功能
            const logoutButton = document.getElementById('logout-button');
            if (logoutButton) {
                logoutButton.addEventListener('click', function() {
                    // 清除本地存储的用户信息
                    if (typeof clearUserInfo === 'function') {
                        clearUserInfo();
                    }
                    
                    // 显示登录/注册表单区域，隐藏游戏内容
                    const formArea = document.querySelector('.relative.z-10 > div:not(#game-content)');
                    const gameContent = document.getElementById('game-content');
                    if (formArea && gameContent) {
                        formArea.classList.remove('hidden');
                        gameContent.classList.add('hidden');
                        
                        // 重置页面标题
                        document.title = '游戏账号 - 登录/注册';
                    }
                });
            }
        });
    </script>
</body>
</html>
